<template>
	<view class="box">
		<u-navbar title="充值" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#666" titleStyle="color:#333" bgColor="#E0DDDA" rightText="充值记录" @rightClick="right"
			@leftClick="leftClick"></u-navbar>
		<view class="show_crad">
			<view class="show_crad_name" @click="tip2">
				<text>{{banklist.length?defbank.account_bank+"****"+defbank.account.slice(-4) : "未绑定银行卡"}}</text>
				<uni-icons type="right" color="#A7A4AD"></uni-icons>
			</view>
		</view>
		<view class="main">
			<view class="main_tit">
				充值金额
			</view>
			<view class="main_wrap">
				<view class="amount_item" >
					<view class="item" :class="{active:idx==index}" v-for="(item,index) in toggleList" :key="item.label"
						@click="sel(item,index)">
						<view class="num">
							{{item}}元
						</view>
					</view>
					<view class="item"  :class="{active:idx==null}" @click="showinput=true,num=0,idx=null">
						<view class="num">
							其他金额
						</view>
					</view>
				</view>
			</view>
			<view class="main_wrap" style="border-bottom: 2rpx solid #dedede;" v-if="showinput">
				<text>￥</text>
				<input type="number" :value="num" placeholder="" @input="getnum" />
			</view>
			<view class="topupmoney">
				充值金额：<text> ￥{{num}}</text>
			</view>

		</view>
		<view class="tip">
			<text>提示：{{info}}</text>
		</view>
		<view class="information entry">
			<view class="zhengce flex_c" @click="toggleAgree">
				<image src="../../static/icon/i_checkbox.png" mode="" v-if="selectStatus"></image>
				<image src="../../static/icon/i_checkbox1.png" mode="" v-if="!selectStatus"></image>
			</view>
			<view class="information_box flex_dq">
				<text>阅读并且同意</text>
				<text class="underline" @click.stop="showAgreements">《新生支付服务协议》</text>
			</view>
		</view>
		<view class="btn" @click="submit">
			确定充值
		</view>
		<!-- 		<u-popup :show="show" :round="10" mode="bottom" @close="show=false">
			<view class="money_main">
				<view class="money_main_top">
					<uni-icons class="inco" type="left" size="22" @click="show=false" color="#fff"></uni-icons>
					<text>充值</text>
				</view>
				<view class="moneycont">
					<view class="item" :class="{active:item.select}" v-for="item in toggleList" :key="item.label" @click="sel(item)">
						<view class="item_top">
							<image src="../../static/icon/i_money.png" mode=""></image>
							<text>{{item.num}} 福合通宝</text>
						</view>
						<view class="num">
							{{item.money}}元
						</view>
					</view>
				</view>
				<view class="btn" style="margin: 50rpx auto;" @click="to">
					立即充值
				</view>
				<view class="information entry">
					<view class="zhengce flex_c" @click="toggleAgree">
						<image src="../../static/icon/i_checkbox1.png" mode="" v-if="!selectStatus"></image>
						<image src="../../static/icon/i_checkbox.png" mode="" v-if="selectStatus"></image>
					</view>
					<view class="information_box flex_dq">
						<text>已阅读并同意</text>
						<text class="underline" @click.stop="gotopuprule">《用户充值协议》</text>
	
					</view>
				</view>
			</view>
		</u-popup> -->
		<!-- 		<u-popup :show="show1" :round="10" mode="bottom" @close="show1=false">
			<view class="pay_wrap">
				<uni-icons type="clear" color="#5852AD" size="26" class="icon" @click="show1=false"></uni-icons>
				<view class="num">
					￥{{num}}
				</view>
				<view class="item_pay" v-for="(item,index) in paylist" :key="index" @click="selpay(item)">
					<image class="logo" :src="item.image" mode=""></image>
					<text>{{item.label}}</text>
					<image v-if="!item.select" class="sel" src="/static/icon/i_checkbox1.png" mode=""></image>
					<image v-if="item.select" class="sel" src="/static/icon/i_checkbox.png" mode=""></image>
				</view>
				<view class="btn" @click="submit">
					确认支付
				</view>
			</view>
		</u-popup> -->
		<u-popup :show="selshow" :round="10" mode="bottom" @close="close" @open="open">
			<view class="rule_content">
				<view class="rule_tit">
					<uni-icons type="left" color="#333" class="icon" @click="close()"
						size="30"></uni-icons><text>选择银行卡</text>
				</view>
				<view class="max_wrap">
					<view class="cardlist">
						<radio-group change="fl" @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in banklist"
								:key="item.id">
								<view class="card_item">
									<view class="card_name">{{item.account_bank}}(****{{item.account.slice(-4)}})
									</view>
									<view>
										<radio :value="item.id.toString()" activeBackgroundColor="#A68A64" />
									</view>
								</view>

							</label>
						</radio-group>
					</view>
					<view class="cardlist_bottom" @click="gobindbankcard">
						<view class="addcard">
							<image src="../../static/icon/addbank1.png" mode=""></image>
							<text>添加银行卡</text>
						</view>
						<uni-icons type="right" color="#333" size="24"></uni-icons>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showpass" mode="center" @close="showpass=false" closeable bgColor="transparent">
			<view class="pass_wrap">
				<view class="tit">
					请输入手机验证码
				</view>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#A68A64" focus class="code_input"
					v-model="password" mode="line" dot></u-code-input>
				<view class="other_btnwrap">
					<view class="other_btn1" @click="showpass=false,password=''">
						取消
					</view>
					<view class="other_btn2" @click="submittopup">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">您还未添加添加银行卡</text>

				<view class="prompt_ntm" @click="tobindbankcard()">
					<text>去添加</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
		<u-popup :show="flag" mode="center" @close="flag = false"  :closeOnClickOverlay="false" bgColor="transparent">
			<view class="content">
				<view class="contents">
					<rich-text :nodes="article"></rich-text>
				</view>
				<view class="btn5" @click="flag=false,selectStatus=true">
					我已知晓并同意
				</view>
			</view>
			
		</u-popup>
		<!-- <u-picker :show="show" :columns="amount" @cancel="show=false" @confirm="confirm"></u-picker> -->
	</view>

</template>

<script>
	import {
		getInfo,
		addamout,
		banklist,
		bankdetail,
		topup,
		accountRechargeConfirm,xinsheng
	} from "../../api/wallet.js"
	export default {
		data() {
			return {
				selshow: false,
				ishave: false, //是否有银行卡
				num: 10,
				cannum: 99,
				tipShow: false,
				showpass: false,
				showinput: false,
				password: "",
				items: [{
						value: "1",
						name: '招商银行（****5294）',
						checked: 'true'
					},
					{
						value: "2",
						name: '中国银行（****5294）'
					},
					{
						value: "3",
						name: '交通银行（****5294）'
					},
					{
						value: "4",
						name: '平安银行（****5294）'
					},
					{
						value: "5",
						name: '交通银行（****5294）'
					},
					{
						value: "6",
						name: '平安银行（****5294）'
					},

				],
				current: 0,
				selcardval: null,
				show: false,
				amount: [],
				info: null,
				toggleList: [
				],
				selectStatus: false,
				show1: false,
				paylist: [{
						label: "快钱钱包",
						select: true,
						image: "/static/image/kq_pay.png"
					},
					{
						label: "新生钱包",
						select: false,
						image: "/static/image/xs_pay.png"
					},
				],
				banklist: [],
				orderid: "", //充值单idm
				idx: 0,
				max:null,
				defnum:null,
				flag:true,
				article:""
			}
		},
		onLoad() {
			this.getInfos()
			this.getbanklist()
			this.getlist()
		},
		onShow() {
			this.tipShow = false
			this.getbanklist()

		},
		methods: {
			getlist(){
				xinsheng().then(res=>{
					console.log(res)
					this.article=res.data.content
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			right() {
				uni.navigateTo({
					url: "/pagesMy/mywallet/topuplist"
				})
			},
			getbanklist() {
				banklist({
					wallet_type: "1"
				}).then(res => {
					this.banklist = res.data
					if (this.banklist.length) {
						this.tipShow = false
					}
					this.defbank = res.data[0]
					console.log(res.data, "银行卡")
				})
			},
			tobindbankcard() {
				uni.navigateTo({
					url: "/pagesMy/mywallet/bindbankcard"
				})
			},
			tip2() {
				if (!this.banklist.length) {
					this.tipShow = true
				} else {
					this.selshow = true
				}
			},
			to() {
				if (!this.selectStatus) {
					uni.$u.toast("请勾选协议")
				} else {
					this.show = false
					this.show1 = true
				}
			},
			showAgreements() {
				uni.navigateTo({
					url: "/pagesMy/mywallet/xinshengrule"
				})
			},
			selpay(ele) {

				this.paylist.forEach(item => item.select = false)
				ele.select = true
				console.log(ele.label)
			},
			gotopuprule() {
				uni.navigateTo({
					url: "/pagesMy/setting/topuprule"
				})
			},
			toggleAgree() {
				this.selectStatus = !this.selectStatus
			},
			sel(ele, index) {
				this.idx = index
				this.showinput=false
				// this.toggleList.forEach(item => item.select = false)
				this.num = ele
				// ele.select = true
			},
			getInfos() {
				getInfo().then(res => {
					// this.amount.push(res.data.amount_item)
					this.max=res.data.max
					this.info = res.data.info
					this.toggleList = res.data.amount_item
					this.defnum=res.data.amount_item[0]
					this.num = res.data.amount_item[0]
					console.log(this.amount)
					// console.log(res,"")
				})
			},
			submittopup() {
				if (this.password.length < 6) {
					uni.$u.toast("请输入完整")
				} else {
					accountRechargeConfirm({
						recharge_id: this.orderid,
						sms_code: this.password
					}).then(res => {
						if (res.code == 1) {
							this.showpass = false
							this.password = ""
							setTimeout(() => {
								uni.navigateTo({
									url: "/pagesMy/mywallet/newmywallet"
								})
							}, 1500)
						}
						uni.$u.toast(res.msg)
						console.log(res)
					})
				}

			},
			submit() {
				if (!this.banklist.length) {
					this.tipShow = true
				} else if (this.num == 0) {
					uni.$u.toast("请选择充值金额")
				} else if (!this.selectStatus) {
					uni.$u.toast("请勾选协议")
				} else {
					topup({
						amount: this.num,
						card_id: this.defbank.id
					}).then(res => {
						if (res.code == 1) {
							// this.num = this.defnum
							this.orderid = res.data.log_id
							this.showpass = true
						}
						uni.$u.toast(res.msg)
						console.log(res)
					})
				}
			},
			confirm(e) {
				this.num = Number(e.value)
				this.show = false
				console.log(this.num)
				console.log(e)
			},
			gobindbankcard() {
				uni.navigateTo({
					url: "/pagesMy/mywallet/bindbankcard"
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.selshow = false
				// console.log('close');
			},
			getnum(e) {
				const a=  Number(e.detail.value)    
				const b=  Number(this.max)  
				console.log(b)
				if(a>b){
					this.num=this.max
					uni.$u.toast("最大金额为"+this.max)
				}else{
					this.num = e.detail.value
				}
				
			},
			radioChange: function(evt) {
				console.log(evt)
				console.log(evt.detail.value)
				this.selcardval = evt.detail.value
				bankdetail({
					id: this.selcardval
				}).then(res => {
					this.selshow = false
					this.defbank = res.data
					console.log(res)
				})
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			selcard() {
				if (this.ishave) {
					this.selshow = true
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未绑定银行卡',
						confirmText: "去绑定",
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pagesMy/mywallet/bindbankcard"
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #E0DDDA;
	}


	/deep/ .u-navbar__content__right__text {
		color: #666;
	}
	
	.content{
		width: 670rpx;
		margin: 0 auto;
		height: 800rpx;
		background-color: #fff;
		overflow: auto;
		padding-bottom: 40rpx;
		border-radius: 20rpx;
		.contents{
			width: 600rpx;
			margin: 0 auto;
		
		}
		.btn5{
			width: 380rpx;
			height: 78rpx;
			background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
			border-radius: 332rpx 332rpx 332rpx 332rpx;
			text-align: center;
			line-height: 78rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 40rpx;
			
			
		}
	}
	.show_crad {
		width: 670rpx;
		margin: 0 auto;
		margin-top: 40rpx;

		.show_crad_txtone {
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.show_crad_name {
			font-weight: 400;
			font-size: 32rpx;
			color: #333;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.main {
		width: 670rpx;
		// height: 5f00rpx;
		background: #f2f2f2;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 0 auto;
		margin-top: 56rpx;
		padding-bottom: 20rpx;
		.main_tit {
			padding-top: 34rpx;
			margin-left: 34rpx;
			margin-right: 34rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #333;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
		}

		.main_wrap {
			width: 598rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			// border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
			display: flex;
			align-items: flex-end;

			>text {
				font-weight: 400;
				font-size: 72rpx;
				color: #333;
				margin-bottom: 16rpx;
			}

			.price_wrap {

				font-weight: 400;
				font-size: 108rpx;
				color: #333;
			}

			>input {
				font-weight: 400;
				font-size: 108rpx;
				color: #333;
			}
		}

		.main_bottom {
			width: 598rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			display: flex;

			>text {
				font-size: 26rpx;
				color: #FFFFFF;
			}

			.main_bottom_txt {
				font-weight: 400;
				font-size: 26rpx;
				color: #FF2CDF;
				margin-left: 20rpx;
			}
		}
	}

	.tip {
		margin-left: 40rpx;
		margin-top: 80rpx;

		>text {
			font-weight: 400;
			font-size: 24rpx;
			color: #A6A5AF;
		}
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		text-align: center;
		line-height: 88rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 150rpx;
	}

	.rule_content {
		padding-top: 30rpx;
		width: 750rpx;
		height: 650rpx;
		background-color: #E0DDDA;
		border-radius: 10rpx;

		.rule_tit {
			font-weight: 500;
			font-size: 36rpx;
			color: #333;
			text-align: center;
			display: flex;
			align-items: center;

			// justify-content: center;
			.icon {
				padding-right: 208rpx;
				margin-left: 48rpx;
			}
		}

		.max_wrap {
			width: 682rpx;
			height: 452rpx;
			background: #f2f2f2;
			margin: 0 auto;
			margin-top: 40rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.cardlist {
			width: 602rpx;
			margin: 0 auto;
			height: 380rpx;
			overflow-y: auto;

			.card_item {
				display: flex;
				width: 602rpx !important;
				height: 94rpx;
				align-items: center;
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);

				.card_name {
					width: 500rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #333;

				}
			}
		}

		.cardlist_bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.addcard {
				display: flex;
				align-items: center;
				margin-left: 44rpx;

				>image {
					width: 34rpx;
					height: 34rpx;
					display: block;
					margin-top: 6rpx;
					margin-right: 10rpx;
				}

				>text {
					font-size: 32rpx;
					color: #333;
					line-height: 52rpx;
				}
			}
		}
	}

	.uni-label-pointer {
		width: 602rpx;
	}

	/deep/ .uni-radio-group {
		overflow: auto;
	}

	.money_main {
		width: 750rpx;
		height: 800rpx;
		background: #2A2753;

		// border-radius: 20rpx 20rpx 20rpx 20rpx;
		.money_main_top {
			width: 750rpx;
			height: 100rpx;
			display: flex;
			align-items: center;

			.inco {
				margin-left: 50rpx;
			}

			>text {
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-left: 270rpx;
			}
		}

	}

	.amount_item {
		width: 750rpx;
		height: 200rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		justify-content: flex-start;

		.item {
			margin-left: 25rpx;
			margin-bottom: 10rpx;
			width: 170rpx;
			height: 70rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid #333;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.num {
				font-weight: 400;
				font-size: 30rpx;
				color: #333;
			}
		}
	}

	.active {
		background: #AB8E68;
		border: none !important;

	}


	.pay_wrap {
		width: 750rpx;
		height: 600rpx;
		background: #2A2753;
		position: relative;

		.icon {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}

		.num {
			padding-top: 68rpx;
			text-align: center;
			font-weight: 400;
			font-size: 72rpx;
			color: #FFFFFF;
		}

		.item_pay {
			width: 672rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			position: relative;
			margin-top: 30rpx;

			.logo {
				width: 70rpx;
				height: 38rpx;
			}

			>text {
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-left: 10rpx;
			}

			.sel {
				width: 34rpx;
				height: 34rpx;
				position: absolute;
				right: 0rpx;
			}
		}
	}

	.selnum {
		width: 598rpx;
		height: 200rpx;

		.selnumitem {
			width: 170rpx;
			height: 70rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.2);
		}
	}

	.topupmoney {
		font-weight: 400;
		font-size: 26rpx;
		color: #333;
		margin-left: 40rpx;
		margin-top: 50rpx;

		>text {
			color: #AB8E68;
			font-size: 44rpx;
		}
	}

	.information {
		width: 100%;
		margin: 40rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		visibility: inherit;
		margin-left: 40rpx;
	}

	.information_box {
		display: flex;
		align-items: flex-start;
		margin-left: 10rpx;
	}

	.information_box>text {
		color: #A6A5AF;
		font-size: 24rpx;
	}

	.information_box>text:nth-child(2n) {
		color: #A68A64 !important;
	}

	.zhengce>image {
		width: 32rpx;
		height: 32rpx;
	}

	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #2A2753;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #ffffff;
		padding-top: 30rpx;
	}


	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #333;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}

	.pass_wrap {
		width: 602rpx;
		height: 406rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		z-index: 998;
	
		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #333;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}
	
		.code_input {
			margin: 0 auto;
		}
	
		.other_btnwrap {
			width: 522rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 50rpx;
	
			.other_btn1 {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid #A68A64;
				font-size: 28rpx;
				color: #A68A64;
				text-align: center;
				line-height: 72rpx;
			}
	
			.other_btn2 {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}
	
		.u-code-input {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		/deep/.u-code-input__item{
			width: 30px !important;
			height: 30px !important;
			margin-right: 14px !important;
		}
		/deep/.u-code-input__item>text {
			color: #fff !important;
		}
	}
</style>